<template>
  <div class="mail_content">
    <el-form :inline="true" ref="searchForm" :model="searchForm" >
      <el-form-item class="block-line">
        <el-col :span="8">
          <el-input v-model="searchForm.title" placeholder="请输入标题关键字搜索" @keyup.enter.native="submitForm"></el-input>
        </el-col>
        <el-col :span="3"><el-button style="margin-left:10px" type="primary" @click="submitForm">搜索</el-button></el-col>
      </el-form-item>
      <el-form-item label="内容性质：">
        <el-select v-model="searchForm.attrId" placeholder="不限" clearable>
          <el-option v-for="item,n in attrs" :value="item.id" :label="item.name" :key="n.toString()"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table ref="multipleTable" v-loading="tbLoading" element-loading-text="拼命加载中" :data="mailList.list" stripe class="table">
      <el-table-column label="标题" width="" prop="title" width="300">
        <template slot-scope="scope">
          <div class="mail-title" slot="reference">
            <a @click="$router.push({name: 'ViewMail', params: {id: scope.row.logicId}})" href="javascript:;">{{scope.row.title}}</a>
            <div class="mail-hot" v-if="scope.row.top==1">顶</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="内容性质">
        <template slot-scope="scope">
          {{attribute(scope.row.attrId)}}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          待审核
        </template>
      </el-table-column>
      <el-table-column label="提交人" width="120">
        <template slot-scope="scope">
          {{scope.row.username}}
        </template>
      </el-table-column>
      <el-table-column label="提交时间" width="180">
        <template slot-scope="scope">
          {{dateFormat(scope.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180"  class-name="is-center sms-opra">
        <template slot-scope='scope'>
          <div v-if="mailList.op">
            <el-button type='text' @click="handlePass(scope.row.id)">通过</el-button>
            <el-button type='text' @click="checkId=scope.row.id;dialogShow=true;">不通过</el-button>
          </div>
          <div v-else>
            权限不足
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        :current-page.sync="searchForm.page"
        :page-size.sync="searchForm.size"
        layout="sizes, total, prev, pager, next, jumper"
        :total="mailList.page.total"
        :page-sizes="[10, 30, 50, 100]"
        @current-change="submitForm('searchForm')"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>
    <!-- 审核不通过弹层 -->
    <el-dialog title="审核不通过原因" :visible.sync="dialogShow" width="30%">
      <el-input v-model="reason" type="textarea" placeholder="请输入原因，不多于255字" :maxlength="strLimit"></el-input>
      <div slot="footer">
        <el-button type="primary" @click="handleNoPass">确定</el-button>
        <el-button type="primary" @click="dialogShow=false;">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {mapActions, mapState} from 'vuex'
  import eventBus from '@/components/common/eventBus'
  export default {
    data () {
      return {
        searchForm: {
          title: '',
          attrId: '',
          auditStatus: 0,
          page: 1,
          size: 10
        },
        reason: null,
        dialogShow: false,
        multipleSelection: [],
        icon: null,
        tbLoading: true,
        dialogNewSend: false,
        strLimit: 255,
        newSendItemId: ''
      }
    },
    mounted () {
      this.initPage()
    },
    computed: {
      ...mapState({
        mailList: state => state.contentManage.mailCheckList,
        attrs: state => state.contentManage.contentType
      })
    },
    methods: {
      ...mapActions(['getMailCheckList', 'getContentTypes', 'setReleaseCheck']),
      async initPage () {
        this.getContentTypes()
        await this.submitForm()
      },
      attribute (id) {
        let attrName
        Object.values(this.attrs).forEach((key, value) => {
          if (key.id === id) {
            attrName = key.name
          }
        })
        return attrName
      },
      // 日期格式化
      dateFormat (date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD HH:mm:ss')
      },
      // 提交
      submitForm () {
        this.getMailCheckList({...this.searchForm})
          .finally((res) => { this.tbLoading = false })
      },
      // 更改每页条数
      handleSizeChange (size) {
        this.searchForm.size = size
        this.submitForm()
      },
      // 通过审核
      async handlePass (id) {
        await this.$confirm('确认审核通过该条记录？', '审核提示')
        const res = await this.setReleaseCheck({
          auditId: id,
          auditStatus: 1
        })
        if (res.data.code === 1) {
          this.$message('成功')
          this.submitForm()
          eventBus.$emit('getReleaseCheckNum')
        }
      },
      // 不通过审核
      async handleNoPass () {
        const res = await this.setReleaseCheck({
          auditId: this.checkId,
          auditStatus: 2,
          reason: this.reason
        })
        if (res.data.code === 1) {
          this.$message.success(res.data.msgZ)
          this.submitForm()
          this.dialogShow = false
          eventBus.$emit('getReleaseCheckNum')
        }
      }
    }
  }
</script>
<style lang="scss">
  .mail_content{
    .block-line{display:block;width:100%;}
    .block-line .el-form-item__content{display: block;}
    .avatar{margin-right:3px;width:32px;height:32px;border-radius:50%;vertical-align:middle;}
    .pagination{margin-top:16px;}
    .el-pagination{text-align:right;}
    .el-pagination__sizes{float:left;}
    .el-dropdown-menu{width:180px}
    .el-table .cell{
      padding-left: 10px;
      padding-right: 10px;
    }
    .tb-head a{margin-right: 10px;}
    .mail{
      &-title{
        display: inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
        a{
          color: rgb(31, 45, 61);
          text-decoration: none;
          &:hover{
            color: #20a0ff;
          }
        }
      }
      &-hot{display: inline-block; background: #ff0000; font-size: 10px;width: 14px;height: 14px;line-height: 13px; text-align: center; color: #fff; float: right; margin-left: 10px;}
      &-opra{
        min-width: 220px!important;
        .el-button{
          min-width: 60px;
        }
      } 
    }
    .newsend{
      &-tip{
        background: #f3f3f3;
        padding: 10px 10px 30px;
        margin: -10px auto 15px;
      }
      &-time{
        width: 100%;
      }
    }
    .condition-wrap{
      width: 100%;
      > div{
        width: 100%;
      }
    }
    .newsend-btn{
      text-align: center;
    }
    .dialog-footer{
      text-align: left;
      padding: 15px 0 20px;;
      border-top: 1px dashed #dedede;
    }
    .send-record-table{
      margin-top: 10px;
    }
  }
</style>
